<template>
   <div class="top">
    <!-- <div class="list-top">
        <div class="top-left">
            <van-icon name="arrow-left" color="#fff" size="16px" @click="rouitem" />
        </div>
        <div class="top-right">
          街道资讯
        </div>
    </div> -->
    <ul class="list">
  <li @click="list('PARK')" :class="state.active ==0?'tabinde':''">燕罗园区</li>
  <li @click="list('STREET')" :class="state.active ==1?'tabinde':''">燕罗街道</li>
  <li @click="list('DISTRICT')" :class="state.active ==2?'tabinde':''">区级资讯</li>
</ul>
   </div>
  <!-- </div>
     <hooyn-nav-bar
    class="header"
    leftIcon="arrow-left"
    title="街道资讯"
    leftIconfont="true"
    fontSize="16px"
    leftIconColor="#fff"
    color="#fff"
    backgroundColor="#68A0F7"
    :returnNav="true"
  /> -->

<div class="activity-one">
  <van-list
  v-model:loading="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
  <van-cell v-for="(i,t) in  state.information" :key="t" @click="lisrout(i.cuid)">

    <div class="activity-item"   >
      <div class="item-left">
        <img :src="i.img"  >
      </div>
      <div class="item-right">
        <p>{{i.title }}</p>
        <div class="tiele"><span>发布时间：</span>{{ i.publishDate }}</div>
        <div class="tiele"><span>主管部门：</span>{{ i.publishAgency }}</div>
        <div class="item">
          <div class="item-rightt">
          <img src="../../assets/yanjing.png" alt=""><span>{{ i.clicks }}</span>
          <img src="../../assets/fenxiang.png" class="fenxiang"><span>{{ i.shares }}</span>
          <img src="../../assets/xingxing.png" class="xingxing"><span>{{ i.favorites }}</span>
        </div>
       </div>
      </div>
    </div>
     </van-cell> 
  </van-list>
  </div>
</template>
<script setup >
import $api from '@/utils/api'
const router = useRouter()
import axios from "axios";
import { Buffer } from "buffer/";
import { Base64 } from 'js-base64'; 
import sha256 from "js-sha256";


const crypto = require("crypto-js");
const getSignature = (msg, key, timestamp, nonce) => {
  console.log(msg,key,timestamp,nonce);
  const sha256Hex1 = sha256Hex(msg);  
    const hmacInput = key + timestamp + nonce + sha256Hex1;  
    const hmac2561 = hmac256(hmacInput, nonce); // 注意：这里的 nonce 应该不是 HMAC 密钥的一部分  
    return hmac2561;  
};
const sha256Hex = (msg) => {
  let lsit = crypto.SHA256(msg).toString(crypto.enc.Hex).toLowerCase()
  return lsit;
};

const hmac256 = (key, msg) => {
  const secretKey = crypto.enc.Utf8.parse(key);
  const msg1 = crypto.enc.Utf8.parse(msg);
  const hash = crypto.HmacSHA256(msg1, secretKey);
  return hash.toString(crypto.enc.Hex).toLowerCase();
};
const getRandomNumber=(min, max) =>{
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
// 示例用法
const msg = "请求报文信息";
const key = "w2cs1PPZazaPCvXw";
const timestamp = Math.floor(Date.now() / 1000);
const nonce = getRandomNumber(1000, 9999);
const start = ref(0); /* 页数，0开始 */
const limit = 20; /* 每页显示数量，默认20 */
const state = reactive({
  active: 0,
  activity:'',
  information:[],
  index:0,
})
const postData = reactive({
  relObjType: '',
  start:start.value,
  relObjID:'',
  limit: limit,
});
  const loading = ref(false);
  const finished = ref(false);
  const onLoad = () => {
    
if(state.active ==0){
  postData.relObjType = 'PARK'
  postData.relObjID =''
}else if(state.active ==1){
  postData.relObjType = 'STREET'
  postData.relObjID ='440306009000'
} else if(state.active ==2){
  postData.relObjType = 'DISTRICT'
  postData.relObjID =''
}
    const signature = getSignature(JSON.stringify(postData), key, timestamp, nonce);
        let url = "https://baoanqifu.tgovcloud.com/micro/EGB-APP-BOOT/api/park/applet/page4cms";
  axios.post(url,postData,{
      headers: {
        "Timestamp": timestamp,
        "Signature": signature,
        "Nonce": nonce,
        "App-Id": "yljd",
      },
    })
    .then((res) => {
        res.data.data.forEach(item => {
          item.img  = 'https://baoanqifu.tgovcloud.com/micro/EGB-APP-BOOT/api/attachment/download/'+ Base64.encode(item.previewImg1)+'?serviceName=MinioAttachService'
          state.information.push(item)
        })
        loading.value = false;
    if (finished.value) {
      finished.value = false;
    }
    postData.start++;
    console.log(postData.start)
    if ( res.data.data.length == 20) {
      finished.value = false;
    } else {
      finished.value = true;
    }
    });
   
    };

    const list =(item) => {
      start.value = 0
      state.information= []
      postData.start =0
  if (item == 'PARK') {
    state.active =0
  }else if(item== 'STREET'){
    state.active =1
  }else if(item== 'DISTRICT'){
    state.active =2
  }
  onLoad()
}
const lisrout =(item) => {
  wx.miniProgram.navigateTo({ 
    url: '/packages/zoneIndex/zxDetail/index?cuid='+item 
     })
}
const rouitem = () => {
        router.push({
    path: `/`
  })
    }
</script>
<style lang="scss" scoped>

.top{
  z-index: 11;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    .list-top{
        display: flex;
        height: 44px;
        line-height: 44px;
        background-color: #68A0F7;
        position: relative;
        .top-left{
            position: absolute;
            left: 0;
            top: 0;
            z-index: 111;
            width: 10%;
            text-align: center;
            font-size: 1rem;
        }
        .top-right{
            width: 100%;
            font-size: 1rem;
            text-align: center;
            color: #fff;
        }
    }
}
.list{
  z-index: 11;
  display: flex;
  height: 2.5rem;
  background-color: #fff;
  li{
    width: calc(100% / 3);
    text-align: center;
    line-height: 2.5rem;
    font-size: 1rem;
    
    box-sizing: border-box;
            border: 1px solid #ccc;
            border-right: 0px solid #ccc;
  }
  .tabinde{
            background-color: #D1F1FF;
            color: #4D9DE7;
        }
}
.van-list{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.van-cell{
  width: 95%;
  padding: 0;
 padding-bottom:0rem ;
 :deep(){
  .van-cell__value{
    width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  .activity-item{
    margin-bottom: 0.8rem;
    width:100%;
    display: flex;
    border-bottom: 1px solid #ccc;
    padding-bottom: 1rem;
    .item-left{
      width: 26%;
      margin-right: 0.8rem;
      img{
        width: 5.25rem;
        height:5.25rem;
      }
    }
    .item-right{
      width: 70%;
      overflow: hidden;
      p{
        font-size:1.1rem;
        font-weight: 400;
        margin: 0;
        width:16.3rem;
        white-space: nowrap;
       overflow: hidden;
       color: #3B3B3B;
        text-overflow: ellipsis;
        margin-bottom: 0.2rem;
      }
      .tiele{
        margin-top: 0.2rem;
        font-size:.7.5rem;
        line-height: 1.5rem;
        display: flex;
        text-align: left;
        span{
          color: #888;
        }
        color: #323333;
      }
      .item{
        margin-top: .4rem;
        .item-rightt{
          display: flex;
          align-items: center;
          span{
            line-height: 1.4rem;
            margin-right: 1rem;
          }
          font-size: .8rem;
          color: #7D7E7E;
          img{
            position: relative;
            top:-0.1rem;
            width: 1.1rem;
            height: .8rem;
            margin-right: .2rem;
          }
          .fenxiang{
            width: .8rem;
            height: .9rem;
            top:-0.1rem;
          }
          .xingxing{
            top:-0.1rem;
            width: 1rem;
            height: .9rem;
          }
        }
      }
    }
  }
 }
 }
 
  &::after{
    display: none;
  }
}
.activity-one{
  padding-top: 60px;
  width: 100%;
  overflow: hidden;
 
  }
</style>